<template>
    <PopList :title="'CesiumIon'" :showButton="true" @ok="ok">
        <LabelInput v-model="cesiumIonUrl" :label="'服务地址'" @blur="initNewList" @keydownenter="initNewList">
        </LabelInput>
        <div class="images_bottom_content">
            <div class="images_servelocation">
                <label>token</label>
                <div class="server_token" v-if="!tokenInputShow" @click="tokenInputShow = true">{{ cesiumIonToken }}
                </div>
                <input v-else type="text" v-model="cesiumIonToken" @blur="changeToken" @keydown.enter="changeToken">
            </div>
        </div>
        <div class="server_lab">
            <div class="server_lab_title">
                <div class="server_lab_title_index">{{ '序号' }}</div>
                <div class="server_lab_title_name">{{ '名称' }}</div>
                <!-- <div class="server_lab_title_server">{{ '服务地址' }}</div> -->
                <div class="server_lab_title_type">{{ '类型' }}</div>
            </div>
            <div class="server_content">
                <div class="server_lab_content" v-for="(item, index) in serverList"
                    @click="changeServerLab(item, index)" :key="index"
                    :class="{ 'server_lab_content_active': serverActive === index }">
                    <div class="server_lab_content_index">{{ index + 1 }}</div>
                    <div class="server_lab_content_name">{{ item.name }}</div>
                    <!-- <div class="server_lab_content_server">{{ item.serverUrl }}</div> -->
                    <div class="server_lab_content_type">{{ item.type }}</div>
                </div>
            </div>
        </div>
        <div class="images_servelocation" v-if="serverUrl">
            <label>url</label>
            <div class="images_servelocation_readonly">{{ serverUrl }}</div>
        </div>
    </PopList>
</template>
<script setup lang="ts">
import { onMounted, ref, inject } from 'vue';
import PopList from "../../../components/PopList.vue";
import { Message } from "earthsdk-ui";
import { getWithCookie } from '../../../api/service';
import LabelInput from "../../../components/LabelInput.vue"
import { createCesiumIonImage, createCesiumIonTerrain, createCesiumIonModel } from "./tools"
import { XbsjEarthUi } from '../../../scripts/xbsjEarthUi';

const cesiumIonToken = ref('')
const tokenInputShow = ref(false)
const serverUrl = ref('')
const emits = defineEmits(['close']);
const serverList = ref<any>([])
const serverActive = ref(-1)
const currentItem = ref<any>()
const accessToken = ref<string>()
const type = ref<string>()
const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi
const cesiumIonUrl = ref('https://api.cesium.com/v1/assets')
const changeServerLab = async (item: any, index: number) => {
    // console.log(item);

    currentItem.value = item
    serverActive.value = index
    type.value = item.type
    getWithCookie(`https://api.cesium.com/v1/assets/${item.id}/endpoint`, cesiumIonToken.value).then((res: any) => {
        // console.log(res);

        if (res.url) {
            serverUrl.value = res.url
        } else {
            serverUrl.value = ''
        }
        if (res.accessToken) {
            accessToken.value = res.accessToken
        } else {
            accessToken.value = ''
        }
        if (res.externalType === "BING") {
            const url = `${res.options.url}/REST/v1/Imagery/Map/${res.options.mapStyle}/{z}/{x}/{y}?uriScheme=https&key=${res.options.key}`;
            serverUrl.value = url
        }
    }).catch(err => {
        console.log(err);
    })
}
const ok = () => {
    if (!serverUrl.value) {
        Message.warning('未选择服务，请先选择')
        return
    }
    if (type.value === 'TERRAIN') {
        createCesiumIonTerrain(xbsjEarthUi, { name: currentItem.value.name, url: `${serverUrl.value}${serverUrl.value.includes('?') ? '&' : '?'}access_token=${accessToken.value}` })
    } else if (type.value === 'IMAGERY') {
        createCesiumIonImage(xbsjEarthUi, { name: currentItem.value.name, url: `${serverUrl.value}${accessToken.value && serverUrl.value.includes('?') ? '&' : accessToken.value && !serverUrl.value.includes('?') ? '?' : ''}${accessToken.value ? 'access_token=' + accessToken.value : ''}` })
    } else if (type.value === '3DTILES') {
        createCesiumIonModel(xbsjEarthUi, { name: currentItem.value.name, url: `${serverUrl.value}${serverUrl.value.includes('?') ? '&' : '?'}access_token=${accessToken.value}` })
    }

}
const initNewList = async () => {
    if (!cesiumIonToken.value) {
        Message.warning('token不存在，请先设置token')
        return
    }
    getWithCookie('https://api.cesium.com/v1/assets', cesiumIonToken.value).then((res: any) => {
        serverList.value = res.items
    }).catch(err => {
        console.log(err);
    })
    window.localStorage.setItem('access_token', cesiumIonToken.value)
}
const changeToken = () => {
    window.localStorage.setItem('cesiumIonUrl', cesiumIonUrl.value)
    tokenInputShow.value = false
    initNewList()
}
onMounted(() => {
    const a = window.localStorage.getItem('access_token')
    if (a) {
        cesiumIonToken.value = a
    }
    const b = window.localStorage.getItem('cesiumIonUrl')
    if (b) {
        cesiumIonUrl.value = b
    }
    initNewList()
})
</script>